/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, Text, View, TouchableOpacity, Image, TextInput, Switch,
} from "react-native";
import { connect } from "react-redux"; // 引入connect函数
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import * as placeRecycleOrderAction from "../actions/placeRecycleOrderAction"; // 导入action方法
import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import BasePage from "../widget/common/BasePage";
import Button from "../widget/common/NCButton";
import EnumConstants from "../common/EnumConstants";

const { OrderType } = EnumConstants;
let recycleOrderPlan;

class PlaceRecycleOrder extends Component {
  constructor(props) {
    super(props);
    recycleOrderPlan = NavigatorUtil.getPageParam(props, "recycleOrderPlan");
  }

  componentWillUnmount() {
    const { props } = this;
    props.dispatch(placeRecycleOrderAction.unmount());
  }

  handleClick() {
    const { props } = this;
    const { placeRecycleOrderReducer } = props;
    const {
      contractor,
      mobile,
      idCard,
      alipay_no,
      alipay_name,
      weichat_name,
      weichat_no,
      collectionType,
    } = placeRecycleOrderReducer;
    props.dispatch(
      placeRecycleOrderAction.placeRecycleOrder(
        recycleOrderPlan,
        contractor,
        mobile,
        idCard,
        collectionType,
        alipay_no,
        alipay_name,
        weichat_name,
        weichat_no,
        res => {
          NavigatorUtil.goOrderSuccess(res.recycle_order_id, OrderType.RECYCLE);
        },
      ),
    );
  }

  render() {
    const { props } = this;
    const { placeRecycleOrderReducer } = props;
    const {
      contractor,
      mobile,
      idCard,
      alipay_no,
      alipay_name,
      weichat_name,
      weichat_no,
      loading,
      collectionType,
    } = placeRecycleOrderReducer;

    return (
      <BasePage style={styles.container} showLoading={loading} hasInput>
        <KeyboardAwareScrollView style={styles.container}>
          <View style={[styles.itemRow, { marginTop: scale * 16 }]}>
            <Text style={styles.textKey}>联系人</Text>
            <TextInput
              value={contractor}
              onChangeText={text => props.dispatch(placeRecycleOrderAction.inputContractor(text))}
              maxLength={10}
              style={styles.input}
              underlineColorAndroid={Color.transparent}
              placeholder="请输入联系人姓名"
              enablesReturnKeyAutomatically={false}
              placeholderTextColor={Color.text_assist}
            />
            <Image source={require("../img/ic_addresslist.png")} style={styles.imgIcon} />
          </View>
          <View style={styles.divider} />
          <View style={styles.itemRow}>
            <Text style={styles.textKey}>手机号</Text>
            <TextInput
              value={mobile}
              onChangeText={text => props.dispatch(placeRecycleOrderAction.inputMobile(text))}
              maxLength={20}
              keyboardType="numeric"
              style={styles.input}
              underlineColorAndroid={Color.transparent}
              placeholder="请输入联系人手机号"
              enablesReturnKeyAutomatically={false}
              placeholderTextColor={Color.text_assist}
            />
          </View>
          <View style={styles.divider} />
          <View style={styles.itemRow}>
            <Text style={styles.textKey}>身份证号</Text>
            <TextInput
              value={idCard}
              onChangeText={text => props.dispatch(placeRecycleOrderAction.inputIdCard(text))}
              maxLength={20}
              keyboardType="numeric"
              style={styles.input}
              underlineColorAndroid={Color.transparent}
              placeholder="请输入联系人身份证号码"
              enablesReturnKeyAutomatically={false}
              placeholderTextColor={Color.text_assist}
            />
          </View>
          <View style={styles.divider} />
          <Text style={styles.textSubTitle}>收款方式</Text>
          <TouchableOpacity
            onPress={() => collectionType === 2 && props.dispatch(placeRecycleOrderAction.changeCollectionType(1))}
          >
            <View style={styles.row}>
              <Image
                source={collectionType === 1 ? require("../img/ic_selected.png") : require("../img/ic_unselected.png")}
                style={styles.imageReal}
              />
              <Text style={collectionType === 1 ? styles.textSelected : styles.textUnSelected}>支付宝收款</Text>
            </View>
          </TouchableOpacity>
          <View style={styles.itemRow}>
            <Text style={styles.textKey}>收款账号</Text>
            <TextInput
              value={alipay_no}
              onChangeText={text => props.dispatch(placeRecycleOrderAction.inputAlipayNo(text))}
              maxLength={20}
              keyboardType="numeric"
              style={styles.input}
              underlineColorAndroid={Color.transparent}
              placeholder="请输入支付宝收款账号"
              enablesReturnKeyAutomatically={false}
              placeholderTextColor={Color.text_assist}
            />
          </View>
          <View style={styles.divider} />
          <View style={styles.itemRow}>
            <Text style={styles.textKey}>收款姓名</Text>
            <TextInput
              value={alipay_name}
              onChangeText={text => props.dispatch(placeRecycleOrderAction.inputAlipayName(text))}
              maxLength={20}
              style={styles.input}
              underlineColorAndroid={Color.transparent}
              placeholder="请输入支付宝收款姓名"
              enablesReturnKeyAutomatically={false}
              placeholderTextColor={Color.text_assist}
            />
          </View>
          <View style={styles.divider} />
          <TouchableOpacity
            onPress={() => collectionType === 1 && props.dispatch(placeRecycleOrderAction.changeCollectionType(2))}
          >
            <View style={styles.row}>
              <Image
                source={collectionType === 2 ? require("../img/ic_selected.png") : require("../img/ic_unselected.png")}
                style={styles.imageReal}
              />
              <Text style={collectionType === 2 ? styles.textSelected : styles.textUnSelected}>微信收款</Text>
            </View>
          </TouchableOpacity>
          <View style={styles.itemRow}>
            <Text style={styles.textKey}>收款账号</Text>
            <TextInput
              value={weichat_no}
              onChangeText={text => props.dispatch(placeRecycleOrderAction.inputWeiChatNo(text))}
              maxLength={20}
              keyboardType="numeric"
              style={styles.input}
              underlineColorAndroid={Color.transparent}
              placeholder="请输入微信收款账号"
              enablesReturnKeyAutomatically={false}
              placeholderTextColor={Color.text_assist}
            />
          </View>
          <View style={styles.divider} />
          <View style={styles.itemRow}>
            <Text style={styles.textKey}>收款姓名</Text>
            <TextInput
              value={weichat_name}
              onChangeText={text => props.dispatch(placeRecycleOrderAction.inputWeiChatName(text))}
              maxLength={20}
              style={styles.input}
              underlineColorAndroid={Color.transparent}
              placeholder="请输入微信收款姓名"
              enablesReturnKeyAutomatically={false}
              placeholderTextColor={Color.text_assist}
            />
          </View>
          <View style={styles.divider} />
          <Button
            onPress={() => this.handleClick()}
            buttonStyle={styles.btnContainer}
            textStyle={styles.btnText}
            title="立即下单"
          />
        </KeyboardAwareScrollView>
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.white,
  },
  itemRow: {
    height: scale * 48,
    width: ScreenWidth,
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16 * scale,
  },
  subRowConatiner: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
  },
  divider: {
    height: 1,
    width: ScreenWidth - scale * 32,
    backgroundColor: Color.divider_secondary,
    marginLeft: scale * 16,
  },
  textKey: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_desc,
    width: scale * 60,
  },
  btnContainer: {
    marginTop: scale * 32,
    marginLeft: scale * 32,
    height: 44 * scale,
    width: ScreenWidth - scale * 64,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.tab_yellow,
    borderWidth: 0,
  },
  btnText: {
    fontSize: FontSize.SIZE_17,
    color: Color.text_title,
  },
  input: {
    flex: 1,
    marginLeft: scale * 30,
    marginRight: scale * 30,
    color: Color.text_title,
    fontSize: FontSize.SIZE_14,
    paddingTop: 0,
    paddingBottom: 0,
  },
  imgIcon: {
    width: scale * 24,
    height: scale * 24,
  },
  textSelected: {
    fontSize: FontSize.SIZE_14,
    color: Color.tab_yellow,
  },
  textUnSelected: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_title,
  },
  row: {
    width: ScreenWidth,
    flexDirection: "row",
    alignItems: "center",
    marginTop: scale * 24,
    paddingHorizontal: 16 * scale,
  },
  imageReal: {
    width: scale * 24,
    height: scale * 24,
    marginRight: scale * 8,
  },
  textSubTitle: {
    fontSize: FontSize.SIZE_17,
    color: Color.text_title,
    fontWeight: "bold",
    marginLeft: scale * 16,
    marginTop: scale * 24,
  },
});

const reducers = state => {
  return {
    placeRecycleOrderReducer: state.placeRecycleOrderReducer,
  };
};

export default connect(reducers)(PlaceRecycleOrder);
